<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畅销书排行</title>
    <link rel="icon" href="image/bang.gif"/>

    <style>
        div {
            width: 300px;
            background: lightyellow;
        }

        #id1 p {
            line-height: 30px;
            text-indent: 1em;
            font-size: 20px;
            color: white;
            background: #368e00 url("image/bang.gif") 122px center no-repeat;
        }

        ul li {
            list-style: none;
            background-repeat: no-repeat;
            text-indent: 2em;
            height: 25px;
            background-position: 10px;
        }

        a {
            text-decoration: none;
            font-size: 14px;
            color: #3385ff;
        }

        a:hover {
            text-decoration: underline;
        }
        ul li:nth-child(1) {background-image: url(image/book_no01.gif);}
        ul li:nth-child(2) {background-image: url(image/book_no02.gif);}
        ul li:nth-child(3) {background-image: url(image/book_no03.gif);}
        ul li:nth-child(4) {background-image: url(image/book_no04.gif);}
        ul li:nth-child(5) {background-image: url(image/book_no05.gif);}
        ul li:nth-child(6) {background-image: url(image/book_no06.gif);}
        ul li:nth-child(7) {background-image: url(image/book_no07.gif);}
        ul li:nth-child(8) {background-image: url(image/book_no08.gif);}
        ul li:nth-child(9) {background-image: url(image/book_no09.gif);}
        ul li:nth-child(10) {background-image: url(image/book_no10.gif);}


    </style>


</head>
<body>
<div id="id1">
    <p>畅销书排行</p>

    <ul>
        <li><a href="#">不抱怨的世界</a></li>
        <li><a href="#">遇见未知的自己</a></li>
        <li><a href="#">活着</a></li>
        <li><a href="#">高效能人士</a></li>
        <li><a href="#">被迫强大</a></li>
        <li><a href="#">遇见心想事成的自己</a></li>
        <li><a href="#">世界上最伟大的销售员</a></li>
        <li><a href="#">我的成功可以复制</a></li>
        <li><a href="#">少有人走的路</a></li>
        <li><a href="#">活出全新的自己</a></li>
    </ul>
</div>


</body>
</html>